<template>
  <el-dialog :title="title" v-model="dialogVisible" :width="width" @close="onclose" :top="top" destroy-on-close>
    <div>
      <slot />
    </div>

    <template #footer>
      <span v-if="showClose">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>

      <span v-else>
        <el-button type="primary" @click="close">确定</el-button>
      </span>

    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";

const props = defineProps({
  width: {
    type: String,
    default: "50%"
  },
  top: {
    type: String,
    default: "30vh"
  },
  title: {
    type: String,
    default: "标题"
  },
  showClose: {
    type: Boolean,
    default: true
  }
});

const dialogVisible = ref(false);

const open = () => (dialogVisible.value = true);
const close = () => (dialogVisible.value = false);

const emit = defineEmits(["submit", "onclose"]);

const onclose = () => emit("onclose");

const submit = () => emit("submit");

defineExpose({
  open,
  close
});
</script>
<style></style>
